<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="decorator/decorator">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>菜品显示</title>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>
</head> 
<body>
   <div layout:fragment="content" th:remove="tag">
	
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="showModalLabel">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="true">
			         &times;
			       	</button>
			        <h4 class="modal-title" id="showModalLabel">
			      		订单详情</h4>
			      </div>
			      <div class="modal-body">
			      		您的订单提交成功，请根据该订单号前往前台进行付款，谢谢。<br/>
			       		<form id = "showForm" method="post">
			       		<p><label>订单号：</label><span class="orderId" id="orderId"></span></p>
			       		<p><label>餐桌：</label><span class="tablename"></span></p>
			       		<p><label>点餐时间:</label></p>
			       		<span class="orderdate"></span><p/>
			       		<p><label>菜单</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>数量</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>价格</label></p>
			       		<p>------------------------------------------------------</p>
			       		       					       	
<!-- 			       		<p><span class="food-name"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;&nbsp;&nbsp;&nbsp;&nbsp;￥<span class="price"></span></p> -->
			       			<input type="hidden" id="orderId"/>
			       			<div id="detallContent">
			       			</div>
			       		<p>------------------------------------------------------</p> 
			       		<p><label>总金额：￥</label>
			       		<span class="totalprice"></span>
		
			       		</p>
			       		
			       		</form>    		
			       
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


<!-- <h5><span>您已经选择了餐桌编号为：</span><span th:text="${choosetable.tableId}"></span><span>，餐桌名称为：</span><span th:text="${choosetable.tableName}"></span></h5> -->
<table width="80%" border="1" class="hovertable" align="center">
<tr>
	<td colspan="10" align="right">
		<input type="button" name="submit" onclick="javascript:history.back(-1);" value="继续点餐"/>
	</td>
</tr> 
  <tr align="center">
    <td width="7%">ID</td>
    <td width="13%">菜名</td>
    <td width="17%">描述</td>
    <td width="9%">价格</td>
    <td width="12%">会员价格</td>
    <td width="11%">菜品图片</td>
    <td colspan="3">数量</td>
  </tr>
  <tr  align="center" th:each="food:${car}"  onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
   
    	<td th:text="${food.foodId}"></td>
        <td th:text="${food.foodName}"></td>
        <td th:text="${food.remark}"></td>
        <td th:text="${food.price}"></td>
        <td th:text="${food.mprice}"></td>
    <td>
    <img th:src="@{'/images/'+${food.img}+'.jpg'}"></img>
    </td>
    
   
    <td  width="7%"> 
      <label for="textfield"></label>

      <div id="box">
       	<input name="foodId" type="hidden" th:value="${food.foodId}" /></div>
       <div  id="boxx"><input name="foodCount" type="text" id="textfield" size="7" th:value="${food.foodCount}" /> 
       </div>   
        </td>
     <td  width="5%"><input type="button" value="删除"  th:onclick="'deleteCarFood('+${food.foodId}+');'"/></td>
    <td width="6%">查看</td>
    
    
  </tr>
  <tr align="center">
    <td colspan="2">&nbsp;</td>
    <td colspan="2">
      <input type="button" name="button" id="button" value="删除全部菜品" th:onclick="'deleteAllFood();'"/>
  </td>
    <td colspan="2"><input type="button" name="editCarFood" id="editCarFood"  value="修 改 数 量" th:onclick="'editCarFood();'"/></td>
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4">您选择的菜价值共$<span th:text="${orderVO.totalprice}"></span>元</td>

    
       <td colspan="6" align = "right"><input type="button" name="editCarFood" id="editCarFood" class="show" value="提交订单" /><!-- th:onclick="'submitOrderAndDetall();'" --></td>
  </tr>
</table>



<script  th:src="@{js/jquery-1.11.1.min.js}" type="text/javascript"></script> 

<!-- Bootstrap -->
<script  th:src="@{js/bootstrap.min.js}"></script>
<script  th:src="@{js/jquery.validate.min.js}"></script>

<script>

//删除菜品
function deleteCarFood(foodId) {
	if(confirm('是否删除')){
		$.ajax({
			type:"POST",
			url:"/deleteCarFood",
			//contentType : "application/json",
			data:{
				foodId:foodId
				},
			dataType:"json",
			success:function(data){
				
				alert('删除成功');
				
				location.href = "/showMycart";
			
			}
		});				
	}
}

//删除全部菜品
function deleteAllFood() {
	if(confirm('是否删除')){
		$.ajax({
			type:"POST",
			url:"/deleteAllFood",
			//contentType : "application/json",
			data:{
				},
			dataType:"json",
			success:function(data){
				
				alert('删除成功');
				
				location.href = "/showMycart";
			
			}
		});				
	}
}
 

</script>
<script>
//修改菜品数量
function editCarFood(){
	var foodId = [];
	var foodCount = [];
	debugger;

	$("#box input").each(function(){
		foodId.push($(this).val());
	});

	$("#boxx input").each(function(){
		foodCount.push($(this).val());
	});

	
	$.ajax({
		type:"POST",
		url:"/editCarFood",
		
		//contentType : "application/json",
		data:{
			foodId:foodId,
			foodCount:foodCount
			},
		dataType:"json",
		success:function(data){
		/* 	$(' input[name="foodCount"]').val(data); */
				
			alert("成功");
			location.href = "/showMycart"
		}
	});		
	
	
}  
</script>
<script type="text/javascript">
//提交订单和订单详情
/* function submitOrderAndDetall() {
	
} */
</script>
<script type="text/javascript">
$(function(){
 	$('.show').click(function(){
		//var orderId;
 		if(confirm('是否提交')){
 			$.ajax({
 				type:"POST",
 				url:"/insertOrderAndDetall",
 				async:false,
 				//contentType : "application/json",
 				data:{
 					},
 				dataType:"json",
 				success:function(data){
 					
 					alert('提交成功');
 					
 					
 					
 				}
 			});	
 			
 			//
 			$.ajax({

 				type:'POST',
 				url:'/findByOrdermaxId',
 				data:{
 					
 				},
 				dataType:"json",
 				
 				success:function(data){
 					var htmlString = '';
 					var order = data.order;
 					for(var i = 0; i!=data.orderdetall.length;i++ ){
 						
 						var orderdetall = data.orderdetall[i];
 						
 						htmlString += '<label>';
 						//htmlString += '		数量：<br/>';
 						htmlString += '		<span>'+orderdetall.foodName+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 						htmlString += '		<span>'+orderdetall.foodcount+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 						htmlString += '		<span>￥'+orderdetall.price+'</span>';
 						htmlString += '</label><br/>';
 						$('#showModal #orderId').text(order.orderId);
 						$('#showModal .totalprice').text(order.totalprice);
 						$('#showModal .orderdate').text((new Date(order.orderdate)).Format("yyyy-MM-dd hh:mm:ss"));
 						$('#showModal .tablename').text(order.tableName);				
 					}
 					$('#detallContent').html(htmlString);
 					$('#orderId').val(order.orderId);
 				}
 			});	
 			$('#showModal').modal('show');
 		}
	}); 
	Date.prototype.Format = function (fmt) {  
        var o = {  
            "M+": this.getMonth() + 1,  
            "d+": this.getDate(),  
            "h+": this.getHours(),   
            "m+": this.getMinutes(),   
            "s+": this.getSeconds(), 
            "q+": Math.floor((this.getMonth() + 3) / 3), 
            "S": this.getMilliseconds() 
        };  
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
        for (var k in o)  
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
        return fmt;  
    };  
})
	
	</script>
</div>
</body>
</html>